import ReactDom from "react-dom";

import "antd/dist/antd.min.css";

// 1 引入
import React, { useEffect, useState } from "react";

function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  const resizeFn = () => {
    console.log("123  ----->  ", 123);
  };

  // 1. 分开写:  逻辑复杂时,拆开写
  // useEffect(() => {
  //   window.addEventListener('resize', resizeFn);
  // }, []);

  // useEffect(() => {
  //   return () => {
  //     console.log('我被卸载了，我被触发了  ----->  ');
  //     window.removeEventListener('resize', resizeFn);
  //   };
  // }, []);

  // 2. 合起来: 逻辑简单,合起来写,效果一样
  useEffect(() => {
    window.addEventListener("resize", resizeFn);

    return () => {
      console.log("我被卸载了，我被触发了  ----->  ");
      window.removeEventListener("resize", resizeFn);
    };
  }, []);

  return <div>我是子组件</div>;
}

ReactDom.render(<App />, document.querySelector("#root"));
